<style type="text/css">
    .square {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
        margin-bottom: 30px;
    }

    .square-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
    }

    .square-inner > li {
        width: calc(99% / 3); /* calc里面的运算符两边要空格 */
        height: calc(99% / 3);
        margin-right: 0;
        margin-bottom: 1%;
        overflow: hidden;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
        grid-template-rows: repeat(2, 1fr); /* fr单位可以将容器分为几等份 */
        grid-gap: 1px; /* grid-column-gap 和 grid-row-gap的简写 */
        grid-auto-flow: row;
    }

    .grid > div {
        color: #fff;
        font-size: 30px;
        line-height: 1;
        text-align: center;
        background: #FFE6B0;
    }

</style>

<body onload="show()">
<div class="square">
    <div class="square-inner grid">
        <div id="yesterday"></div>
        <div id="lastweek"></div>
        <div id="lastmonth"></div>
        <div id="1"></div>
        <div id="7"></div>
        <div id="30"></div>
    </div>
</div>
</body>
<script src="/js/echarts.js"></script>
<script type="text/javascript">


    function show() {

        getLastMonthData();
        getYesterDayData();
        getLastWeekData();

        getLastDaySale();
        getLastWeekSale();
        getLastMonthSale();

    }


    function getYesterDayData() {
        var day = "yesterday";
        getPieData(day, "昨日");
    }

    function getLastWeekData() {
        var day = "lastweek";
        getPieData(day, "七日");
    }

    function getLastMonthData() {
        getPieData("lastmonth", "三十日")
    }


    function getPieData(day, title) {
        $.ajax({
            type: 'GET',
            url: '/admin/data/' + day,
            dataType: 'json',
            contentType: "application/json",
            success: function (res) {
                var names = res['data']["name"];
                var pirData = res['data']["dataMap"];


                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(day));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: title + '手机销售情况',
                        //subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: pirData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]

                };
                myChart.setOption(option);
            },

        })
    }


    function getLastDaySale() {
        getBarData("1", "昨日")
    }

    function getLastWeekSale() {
        getBarData("7", "七日")
    }

    function getLastMonthSale() {
        getBarData("30", "三十日")
    }


    function getBarData(day, title) {

        $.ajax({
            type: 'GET',
            url: 'admin/data/' + day,

            dataType: 'json',
            contentType: "application/json",
            success: function (res) {

                var name = res['data']["name"];
                var sale = res['data']['sale'];


                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(day));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: title + '销售额'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销售额']
                    },
                    xAxis: {
                        data: name
                    },
                    yAxis: {},
                    series: [{
                        name: '销售额',
                        type: 'bar',
                        data: sale
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);


            },

        })


    };

</script>